<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="keywords" content="shopping">
  <meta name="description" content="shopping">
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=1">
  <title>shopping</title>
  <script src="https://cdn.bootcss.com/jquery/1.12.3/jquery.min.js"></script>
  <link rel="stylesheet" href="./css/evaluate.css">
  <link rel="stylesheet" href="./css/public.css">
  <link rel="stylesheet" href="//at.alicdn.com/t/font_745333_g55zsfjlolf.css">

</head>

<body>
  <!-- 公共头部 -->
  <div class="contentHead">
    <div class="head">
      <div class="iconfont">
        <a href="#" class="icon pd-x_user"></a>
        <a href="#" class="icon pd-x_qrcode"></a>
        <a href="#" class="icon pd-x_phone"></a>
        <a href="#" class="icon pd-x_help"></a>
      </div>
      <div class="tel">
        <span class="icon pd-x_service"></span>
        <span class="server">服务热线</span>
        <span class="phone">400-1234-5678</span>
      </div>
    </div>
  </div>
  <!-- 头部搜索 -->
  <div class="search">
    <div class="logo">
      <img src="./images/logarea.png" alt="">
    </div>
    <div class="searchinfo">
      <div class="searchbox">
        <p>全部分类</p>
        <div class="line"></div>
        <input type="text" name="" id="" placeholder="搜索商品">
        <div class="right">
          <span class="icon pd-search_line"></span>
          <span class="sousuo">搜索</span>
        </div>
      </div>
    </div>
    <div class="myshop">
      <div class="bg">
        <span class="icon pd-x_cart"></span>
      </div>
      <div class="my">
        <p class="shop">我的购物车
          <span class="icon pd-baseicons82"></span>
        </p>
        <p class="pirce">￥ 0.00</p>
      </div>
    </div>
  </div>
  <!-- nav -->
  <div class="navT">
    <div class="nav">
      <img src="./images/nav1.png" alt="">
      <div class="navAll">
        <a href="#" style="padding-left: 72px" class="active">首页</a>
        <a href="#">限时秒杀</a>
        <a href="#">商品促销</a>
        <a href="#">关于我们</a>
        <a href="#">联系我们</a>
      </div>
    </div>
  </div>

  <!-- 内容 -->
  <div class="cont">
    <!-- 左边头像个人导航 -->
    <div class="personal">
      <div class="personalTop">
        <img src="./images/head.png" alt="">
        <p class="welcome">欢迎回来，</p>
        <p class="name">牛小叉</p>
      </div>
      <div class="personalBottom">
        <ul>
          <li style="padding-top: 0" class="active">
            <span class="line"></span>
            <span class="icon pd-member_solid"></span>
            <a href="#">会员中心</a>
          </li>
          <li>
            <span class="icon pd-member_solid"></span>
            <a href="#">个人资料</a>
          </li>
          <li>
            <span class="icon pd-member_solid"></span>
            <a href="#">账户安全</a>
          </li>
          <li>
            <span class="icon pd-member_solid"></span>
            <a href="#">收货地址</a>
          </li>
          <li>
            <span class="icon pd-member_solid"></span>
            <a href="#">账户余额</a>
          </li>
          <li>
            <span class="icon pd-member_solid"></span>
            <a href="#">提现记录 </a>
          </li>
          <li>
            <span class="icon pd-member_solid"></span>
            <a href="#">我的优惠券</a>
          </li>
          <li>
            <span class="icon pd-member_solid"></span>
            <a href="#">我的积分</a>
          </li>
          <li>
            <span class="icon pd-member_solid"></span>
            <a href="#">我的订单</a>
          </li>
          <li>
            <span class="icon pd-member_solid"></span>
            <a href="#">退款/退货及维修</a>
          </li>
          <li>
            <span class="icon pd-member_solid"></span>
            <a href="#">商品评价/晒单</a>
          </li>
          <li>
            <span class="icon pd-member_solid"></span>
            <a href="#">商品收藏</a>
          </li>
        </ul>
      </div>

    </div>
    <!-- 右边具体内容:余额充值 -->
    <div class="evaluate center">
      <div class="evaluate-top">
        <h2>商品评价/晒单</h2>
        <p>您的评价可以帮助大家更好选择产品，还可以获得积分哦</p>
      </div>
      <!-- 列表 -->
      <div class="evaluate-table clearfloat">
        <dl class="xinxi">
          <dt>商品信息</dt>
          <dd>
            <div class="xinxi-img"></div>
            <p class="xinxi-text">
              <a href="#">联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
            </p>
          </dd>
        </dl>
        <dl class="pingjia">
          <dt>评价</dt>
          <dd>
            <div class="pingjia-points">
              <span>评分:</span>
              <i class="icon pd-star_line"></i>
              <i class="icon pd-star_line"></i>
              <i class="icon pd-star_line"></i>
              <i class="icon pd-star_line"></i>
              <i class="icon pd-star_line"></i>
            </div>
            <p class="pingjia-text">
              <span>商品评价：</span>
              联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑，英特尔E3 1505M 512G固态+1T+1T硬盘 8G专业独立显卡 Win10专业版
            </p>
            <div class="pingjia-img">
              <div></div>
              <div></div>
            </div>
          </dd>
        </dl>
        
      </div>
      <div class="evaluate-table clearfloat">
        <dl class="xinxi">
          <dd>
            <div class="xinxi-img"></div>
            <p class="xinxi-text">
              <a href="#">联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑</a>
            </p>
          </dd>
        </dl>
        <dl class="pingjia">
          <dd>
            <div class="pingjia-points">
              <span>评分:</span>
              <i class="icon pd-star_line"></i>
              <i class="icon pd-star_line"></i>
              <i class="icon pd-star_line"></i>
              <i class="icon pd-star_line"></i>
              <i class="icon pd-star_line"></i>
            </div>
            <p class="pingjia-text">
              <span>商品评价：</span>
              联想ThinkPad P70（04CD）17.3英寸移动图形处理工作站笔记本电脑，英特尔E3 1505M 512G固态+1T+1T硬盘 8G专业独立显卡 Win10专业版
            </p>
            <div class="pingjia-img">
              <div></div>
              <div></div>
            </div>
          </dd>
        </dl>
        
      </div>
      <!-- 翻页区 -->
      <div class="changepage">
        <a href="#">首页</a>
        <a href="#">上一页</a>
        <ul class="changepage-info">
          <li class="active">
            <a href="#">1</a>
          </li>
        </ul>
        <a href="#">下一页</a>
        <a href="#">尾页</a>
      </div>
    </div>
  </div>

  <!-- 正品保障 -->
  <div class="real">
    <div class="realThing">
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
      <div class="realThingCont">
        <span class="icon pd-real_solid"></span>
        <span>正品保障</span>
      </div>
    </div>
  </div>
  <!-- 公共底部 -->
  <div class="footer">
    <div class="footerTop">
      <div>
        <img src="./images/LOGO.png" alt="">
      </div>
      <div class="">
        <dl>
          <dt>配送与支付</dt>
          <dd>货到付款区域</dd>
          <dd>配送支付智能查询</dd>
          <dd>支付方式说明</dd>
        </dl>
      </div>
      <div class="">
        <dl>
          <dt>服务保证</dt>
          <dd>退换货原则</dd>
          <dd>售后服务保证</dd>
          <dd>产品质量保证</dd>
        </dl>
      </div>
      <div class="">
        <dl>
          <dt>联系我们</dt>
          <dd>网站故障报告</dd>
          <dd>选机咨询</dd>
          <dd>投诉与建议</dd>
        </dl>
      </div>
      <div class="fuwu">
        <dl>
          <dt>服务热线</dt>
          <dd>400-023-4567</dd>
        </dl>
      </div>
    </div>
    <div class="line"></div>
    <div class="footerBottom">
      <p>© 2018 WWW.SHOPPING.COM</p>
    </div>
  </div>
</body>
<script src="./js/jquery.1.8.2.min.js"></script>
</html>